<template>
  <div class="container">
    <Header />
    <NavBar />
    <!-- 轮播图及侧边框模块 -->
    <div class="sideBar">
      <Swiper />
      <div class="nav">
        <ul>
          <!-- 手机 -->
          <li>
            <a href="">手机</a>
            <a>></a>
            <div class="pop">
              <div class="left" v-for="item in PhoneList" :key="item.id">
                <div>
                  <div class="xuangou_left">
                    <!-- rows[66].s_goods_photos[0] -->
                    <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                    <div class="img">
                      <a :href="`#/detail/${item.id}`">
                        <img v-lazy="item.s_goods_photos[0].path" alt="" />
                        <span>{{ item.name }}</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <!-- 电视 -->
          <li>
            <a href="">电视</a>
            <a>></a>
            <div class="pop">
              <div class="left" v-for="item in TVList" :key="item.id">
                <div>
                  <div class="xuangou_left">
                    <!-- rows[66].s_goods_photos[0] -->
                    <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                    <div class="img">
                      <a :href="`#/detail/${item.id}`">
                        <img v-lazy="item.s_goods_photos[0].path" alt="" />
                        <span>{{ item.name }}</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <!-- 笔记本 平板 -->
          <li>
            <a href="">笔记本 平板</a>
            <a>></a>
            <div class="pop">
              <div class="left" v-for="item in ComputerList" :key="item.id">
                <div>
                  <div class="xuangou_left">
                    <!-- rows[66].s_goods_photos[0] -->
                    <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                    <div class="img">
                      <a :href="`#/detail/${item.id}`">
                        <img :src="item.s_goods_photos[0].path" alt="" />
                        <span>{{ item.name }}</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <!-- 家电 -->
          <li>
            <a href="">家电</a>
            <a>></a>
            <div class="pop">
              <div class="left" v-for="item in HouseList" :key="item.id">
                <div>
                  <div class="xuangou_left">
                    <!-- rows[66].s_goods_photos[0] -->
                    <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                    <div class="img">
                      <a :href="`#/detail/${item.id}`">
                        <img v-lazy="item.s_goods_photos[0].path" alt="" />
                        <span>{{ item.name }}</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <!-- 出行 穿戴 -->
          <li>
            <a href="">出行 穿戴</a>
            <a>></a>
            <div class="pop">
              <div class="left" v-for="item in WatchList" :key="item.id">
                <div>
                  <div class="xuangou_left">
                    <!-- rows[66].s_goods_photos[0] -->
                    <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                    <div class="img">
                      <a :href="`#/detail/${item.id}`">
                        <img :src="item.s_goods_photos[0].path" alt="" />
                        <span>{{ item.name }}</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <!-- 智能 路由器 -->
          <li>
            <a href="">智能 路由器</a>
            <a>></a>
            <div class="pop">
              <div class="left" v-for="item in IntellectList" :key="item.id">
                <div>
                  <div class="xuangou_left">
                    <!-- rows[66].s_goods_photos[0] -->
                    <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                    <div class="img">
                      <a :href="`#/detail/${item.id}`">
                        <img v-lazy="item.s_goods_photos[0].path" alt="" />
                        <span>{{ item.name }}</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <!-- 电源 配件 -->
          <li>
            <a href="">电源 配件</a>
            <a>></a>
            <div class="pop">
              <div class="left" v-for="item in PartsList" :key="item.id">
                <div>
                  <div class="xuangou_left">
                    <!-- rows[66].s_goods_photos[0] -->
                    <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                    <div class="img">
                      <a :href="`#/detail/${item.id}`">
                        <img v-lazy="item.s_goods_photos[0].path" alt="" />
                        <span>{{ item.name }}</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <!-- 健康 儿童 -->
          <li>
            <a href="">健康 儿童</a>
            <a>></a>
            <div class="pop">
              <div class="left" v-for="item in HealthList" :key="item.id">
                <div>
                  <div class="xuangou_left">
                    <!-- rows[66].s_goods_photos[0] -->
                    <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                    <div class="img">
                      <a :href="`#/detail/${item.id}`">
                        <img v-lazy="item.s_goods_photos[0].path" alt="" />
                        <span>{{ item.name }}</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <!-- 耳机 音响 -->
          <li>
            <a href="">耳机 音响</a>
            <a>></a>
            <div class="pop">
              <div class="left" v-for="item in EodsList" :key="item.id">
                <div>
                  <div class="xuangou_left">
                    <!-- rows[66].s_goods_photos[0] -->
                    <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                    <div class="img">
                      <a :href="`#/detail/${item.id}`">
                        <img v-lazy="item.s_goods_photos[0].path" alt="" />
                        <span>{{ item.name }}</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <!-- 生活 箱包 -->
          <li>
            <a href="">生活 箱包</a>
            <a>></a>
            <div class="pop">
              <div class="left" v-for="item in LifeList" :key="item.id">
                <div>
                  <div class="xuangou_left">
                    <!-- rows[66].s_goods_photos[0] -->
                    <!-- 先筛选类别为classify_id(分类id)一致的,在遍历相关内容 -->
                    <div class="img">
                      <a :href="`#/detail/${item.id}`">
                        <img v-lazy="item.s_goods_photos[0].path" alt="" />
                        <span>{{ item.name }}</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="Home">
        <div class="mbox1">
          <ul>
            <li>
              <a href=""
                ><img src="/images/sh01.png" alt="" />
                <div class="intext">保障服务</div>
              </a>
            </li>
            <li>
              <a href=""
                ><img src="/images/sh02.png" alt="" />
                <div class="intext">企业团购</div>
              </a>
            </li>
            <li>
              <a href=""
                ><img src="/images/sh3.png" alt="" />
                <div class="intext">F码通道</div>
              </a>
            </li>
          </ul>
          <ul>
            <li>
              <a href=""
                ><img src="/images/sh4.png" alt="" />
                <div class="intext">米粉卡</div>
              </a>
            </li>
            <li>
              <a href=""
                ><img src="/images/sh5.png" alt="" />
                <div class="intext">以旧换新</div>
              </a>
            </li>
            <li>
              <a href=""
                ><img src="/images/sh6.png" alt="" />
                <div class="intext">话费充值</div>
              </a>
            </li>
          </ul>
        </div>
        <div class="mbox">
          <a href="">
            <img src="/images/mxbox01.jpg" alt="" />
          </a>
        </div>
        <div class="mbox">
          <a href="">
            <img src="/images/mxbox02.jpg" alt="" />
          </a>
        </div>
        <div class="mbox">
          <a href="">
            <img src="/images/mxbox03.png" alt="" />
          </a>
        </div>
      </div>
    </div>
    <Content />
    <Product />
    <!-- 视频模块 -->
    <div class="videoBox">
      <div class="hz">
        <h2>视频</h2>
      </div>
      <div class="vb_Content">
        <div id="sp">
          <img src="/images/sp01.webp" width="100%" height="180" alt="" />
          <div class="n1">2021年春季新品发布会第一场</div>
        </div>
        <div id="sp">
          <img src="/images/sp02.webp" width="100%" height="180" alt="" />
          <div class="n1">Redmi 10X系列发布会</div>
          <div class="n2">Redmi 10X系列发布会</div>
        </div>
        <div id="sp">
          <img src="/images/sp03.webp" width="100%" height="180" alt="" />
          <div class="n1">小米10 青春版 发布会</div>
        </div>
        <div id="sp">
          <img src="/images/sp04.webp" width="100%" height="180" alt="" />
          <div class="n1">小米10 8K手机拍大片</div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Nav from "./Nav.vue";
import Swiper from "../components/Swiper.vue";
import Content from "../components/Content.vue";
import Product from "../components/Product.vue";
import Footer from "../components/Footer.vue";
import NavBar from "../components/NavBar.vue";
import { getGoods } from "@/assets/js/request.js";
// import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
export default {
  // name: "Products",
  components: {
    Header,
    Nav,
    Swiper,
    Content,
    Product,
    Footer,
    NavBar,
  },
  data() {
    return {
      list: [],
      PhoneList: [],
      TVList: [],
      ComputerList: [],
      HouseList: [],
      WatchList: [],
      IntellectList: [],
      PartsList: [],
      HealthList: [],
      EodsList: [],
      LifeList: [],
    };
  },
  async created() {
    //侧边框
    //手机
    let phone = await getGoods(5);
    // this.list = phone.rows;
    this.PhoneList = phone.rows;

    //电视
    let tv = await getGoods(15);
    this.TVList = tv.rows;

    //电脑
    let Computer = await getGoods(34);
    this.ComputerList = Computer.rows;

    //家电
    let House = await getGoods(48);
    this.HouseList = House.rows;

    //出行
    let Watch = await getGoods(59);
    this.WatchList = Watch.rows;

    //智能
    let Intellect = await getGoods(60);
    this.IntellectList = Intellect.rows;

    //配件
    let Parts = await getGoods(61);
    this.PartsList = Parts.rows;

    //健康
    let Health = await getGoods(62);
    this.HealthList = Health.rows;

    // 耳机
    let Eods = await getGoods(63);
    this.EodsList = Eods.rows;

    //生活
    let Life = await getGoods(64);
    this.LifeList = Life.rows;
  },
};
</script>

<style lang="scss" >
@import "@/assets/scss/base.scss";
@import "@/assets/scss/reset.scss";

.sideBar {
  margin: 0 auto;
  width: 1280px;
  // margin-top: 200px;
  height: 460px;
  color: white;
  position: relative;
  .nav {
    width: 231px;
    height: 500px;
    background: #666;
    ul {
      padding: 20px 0;
      position: relative;
    }
    ul li {
      display: block;
      width: 100%;
      height: 45px;
      line-height: 40px;
      font-size: 14px;
      padding: 0 30px;
    }
    ul li:hover {
      width: 100%;
      background-color: #ff6700;
    }
    ul li a {
      font-size: 16px;
      color: white;
      float: left;
    }
    ul li a:nth-child(2) {
      float: right;
    }
    ul li .pop {
      width: 1000px;
      height: 500px;
      background: #fff;
      // background-color: skyblue;
      position: absolute;
      left: 230px;
      top: 0px;
      display: none;
    }
    ul li:hover .pop {
      display: block;
      box-shadow: 2px 3px 5px #ccc;
      border-top: 1px solid #ccc;
    }
    ul li .pop .left {
      width: 235px;
      height: 83px;
      background: #fff;
      float: left;
    }
    ul li .pop .left div {
      margin-bottom: 3px;
      float: left;
    }
    ul li .pop .left .xuangou_left {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      margin-left: 10px;
      margin-top: 20px;
      float: left;
    }
    ul li .pop .left .xuangou_left a {
      color: #000;
    }
    ul li .pop .left .xuangou_left a img {
      width: 45px;
      float: left;
      valign: middle;
    }
    ul li .pop .left .xuangou_left a span {
      display: inline-block;
      margin-left: 10px;
      font-size: 14px;
    }
    ul li .pop .left .xuangou_left a span:hover {
      color: #ff6700;
    }
  }
}
.Home {
  width: 100%;
  height: 140px;
  margin: 0 auto;
  // background-color: gray;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .mbox1 {
    width: 250px;
    height: 150px;
    display: block;
    float: left;
    background-color: rgb(95, 87, 80);
    ul {
      display: flex;
      li {
        padding-top: 15px;
        width: 100px;
        height: 60px;
        font-size: 12px;
        line-height: 25px;
        color: #ccc;
        // border: 1px solid #ccc;
        img {
          width: 25px;
          height: 25px;
          margin: 0 auto;
        }
        .intext {
          color: #ccc;
        }
      }
    }
    ul li a :hover {
      color: white;
    }
  }
  .mbox {
    width: 320px;
    height: 150px;
    margin: 0 10px;
    background-color: #ccc;
    display: block;
    float: left;
    background: rgb(95, 87, 80);
  }
}

.videoBox {
  background-color: #f5f5f5;
  .hz {
    width: 80%;
    height: 40px;
    margin: 0 auto;
    // margin-bottom: 10px;
    h2 {
      float: left;
      font-size: 20px;
      font-family: "微软雅黑";
    }
  }
  .vb_Content {
    height: 360px;
    width: 80%;
    margin: 0 auto;
  }

  #sp {
    margin-top: 20px;
    width: 280px;
    height: 280px;
    float: left;
    background-color: white;
    transition: 0.35s ease;
    margin: 10px;
  }
  #sp:hover {
    transform: translateY(-2px);
    box-shadow: 0px 10px 20px 5px lightgrey;
  }
  #sp img {
    cursor: pointer;
  }
  .n1 {
    text-align: center;
    font-family: "微软雅黑";
    cursor: pointer;
    font-size: 14px;
    margin-top: 20px;
  }
  .n2 {
    width: 100%;
    font-size: 10px;
    color: #666;
    // text-align: center;
    overflow: hidden;
    height: 30px;
    cursor: pointer;
    margin-top: 8px;
    margin-bottom: 20px;
  }
}
</style>